<template>
  <div class="app-container">
   <div class="main-content">
  
      <!-- 路由视图，用于渲染不同的组件 -->
      <router-view></router-view>
    </div>
   
   
    <!-- 商品列表区域 -->
    <div class="content">
      <table class="book-table">
        <thead>
          <tr>
            <th>封面</th>
            <th>ID</th>
            <th>书名</th>
            <th>价格</th>
            <th>作者</th>
            <th>出版社</th>
            <th>库存</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in filteredDataList" :key="index">
            <td><img :src="item.image" class="book-item-img"></td>
            <td>{{ item.id }}</td>
            <td>{{ item.title }}</td>
            <td>{{ item.price }}</td>
            <td>{{ item.author }}</td>
            <td>{{ item.publish }}</td>
            <td>{{ item.count }}</td>
            <td>
              <div v-if="item.count > 0">
                <button style="background-color: #e74c3c; color: white;" @click="add(item)" class="add-button">下架</button>
              </div>
              <div v-else>
                <button style="background-color: #bdc3c7; color: white;" disabled class="add-button">缺货</button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      dataList: [],
      searchQuery: '',
      filteredDataList: [],
    };
  },
  methods: {
    fetchBooks() {
      axios.get("http://localhost:3000/books")
       .then(response => {
          this.dataList = response.data;
          this.filteredDataList = response.data;
        })
       .catch(error => {
          console.error('数据加载失败:', error);
        });
    },
    add(item) {
      // 这里可以添加实际的加入购物车逻辑，由于去除购物车功能，暂时留空
      console.log(`尝试加入商品：${item.title}`);
    },
    searchBooks() {
      if (this.searchQuery === '') {
        this.filteredDataList = this.dataList;
      } else {
        this.filteredDataList = this.dataList.filter(item => {
          return item.title.includes(this.searchQuery);
        });
      }
    },
  },
  mounted() {
    this.fetchBooks();
  }
};
</script>

<style scoped>
.app-container {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  padding: 20px;
}

.search-and-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-container {
  margin: 0;
}

.search-input {
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 300px;
  font-size: 15px;
  margin-right: 10px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
}

.search-button {
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  background-color: #007bff;
  color: white;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-button:hover {
  background-color: #0056b3;
}



.content {
  width: 100%;
}

.book-table {
  width: 100%;
  border-collapse: collapse;
}

.book-table th,
.book-table td {
  border: 1px solid #f0f0f0;
  padding: 15px;
  text-align: left;
}

.book-item-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 5px;
}

.add-button {
  padding: 8px 16px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}
</style>
  